<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="/vue_basic/js/vue.js"></script>
    <!-- <script src="/js/vue.js"></script> -->
    <title>计算属性</title>
</head>
<body>
    <div id="root">
        姓:<input type="text" v-model="firstName"><br>
        名:<input type="text" v-model="lastName"><br>
        姓名:<span>{{firstName+'-'+lastName}}</span><br>
        姓名:<span>{{fullName}}</span><br>
    </div>
    
</body>
<script>
    const vm = new Vue({
        el:'#root',
        data:{
            firstName:'张',
            lastName:'三',
        },
        computed:{
            // 只有只读不写时才可以简写
            // 简写
                        // function函数就直接当get方法用
            fullName(){
                return this.firstName + '-' + this.lastName
            },
            // 完整写法
            /* fullName:{
                //get有什么作用?当有人读取fullName时，get就会被调用，且返回值就作为fullName的值
                //get什么时候调用?1.初次读取fullName时。2.所依赖的数据发生变化时.
                get(){
                    console.log('get被调用了')
                    // console.log(this) 此处的this是vm
                    return this.firstName + '-' + this.lastName
                },
                // 不必须
                // set什么时候调用?当fullName被修改时。
                set(value){
                    console.log('set被调用了',value);
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                },
            } */

        },

    })
</script>
</html>